<script setup lang='ts'>
import { computed } from 'vue';
import { IconProps } from './type';
import { omit } from 'lodash-es';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'


defineOptions({
    name: 'Icon',
    inheritAttrs: false
})

const props = defineProps<IconProps>()
const filteredProps = computed(() => omit(props, ['type', 'color']))

const customStyles = computed(() => {
  return props.color ? { color: props.color } : {}
})
    
</script>

<template>
    <i class="vk-icon" :class="{[`vk-icon--${type}`] : type }" :style="customStyles" v-bind="$attrs">
      <font-awesome-icon v-bind="filteredProps"/>
    </i>
</template>

<style lang='scss' scoped>

</style>
